<!-- 列表页面搜索框 -->
<template>
  <div class="">
    <el-input :placeholder="placeholder" v-model.trim="input" @keyup.enter.native="onSearch" clearable>
      <!-- <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button> -->
    </el-input>
  </div>
</template>
<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: () => '请输入内容',
    },
  },
  data() {
    return {
      input: '',
    }
  },
  methods: {
    onSearch(val) {
      if (this.$parent.params) {
        this.$parent.params.keyword = this.input
        this.$parent.params.page = 1
      }
      this.$emit('handleSearch', this.input)
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep.el-input {
  width: 500px !important;

  .el-input__inner {
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);
    padding: 3px 11px;

    &:hover {
      border-color: #1b63ab;
    }

    &:focus {
      border-color: #1b63ab;
      box-shadow: 0 0 0 2px rgba(0, 72, 157, 0.2);
    }
  }
}

::v-deep.el-input-group__append {
  color: #fff !important;
  border-color: #00489d !important;
  background: #00489d !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045) !important;
  padding: 0 10px !important;

  &:hover,
  &:focus {
    border-color: #1b63ab !important;
    background: #1b63ab !important;
  }
}
</style>